import * as React from 'react'
import { ISku } from '../../types'
import * as api from '../../services/api'
import ProductItem from '../../components/ProductItem'
import style from './style.module.css'
import Nav from '../../components/Nav'

function Product() {
    const [rows, setRows] = React.useState<ISku[]>([])

    React.useEffect(() => {
        const getData = async () => {
            let result = await api.listSku()
            if (result.stat === 'OK') {
                setRows(result.rows)
            }
        }
        getData()
    }, [])
    return (
        <div className={style.back}>
            <div className={style.wrapper}>
                <main className={style.container}>
                    {rows.map(item => (
                        <ProductItem sku={item} key={item.id} />
                    ))}
                </main>
            </div>
            <Nav />
        </div>
    )
}
export default Product